<style scoped>
body {
  background-color: rgba(18, 33, 43);
  overflow: hidden;
  margin: 0%;
  padding: 0%;
  height: 100%;
  font-family: "微软雅黑";
}
#header {
  height: 10%;
  display: flex;
  justify-content: space-between;
}
/* 内容栏样式 */
#content {
  transition: all 0.3s ease; /* 过渡效果 */
  background-color: rgba(38, 33, 33, 0.8);
  height: 90%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  justify-content: center; /* 水平居中 */
  transform: all 0.3 ease;
}

/* 地图区域样式 */
#map2 {
  background-color: rgba(243, 237, 237, 0.918);
  transition: all 0.3s ease; /* 过渡效果 */
  overflow: hidden;
  position: relative;
  width: 100%;
}

#title {
  width: 35%; /* 内容栏宽度为页面宽度的20% */
  display: flex; /* 启用Flexbox布局 */
  flex-direction: column; /* 使子元素垂直排列 */
  background-color: rgb(18, 33, 43);
}
#content-top {
  background-color: rgba(18, 33, 43);
  width: 65%; /* 内容栏宽度为页面宽度的20% */
  flex-direction: column; /* 使子元素垂直排列 */
}
#top1 {
  /* background-color: rgba(83, 160, 215, 0.5); */
  height: 58%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
#map-select {
  background-color: rgba(18, 33, 43);
  width: 41%;
  display: flex; /* 启用Flexbox布局 */
  position: relative;
  left: 10.5%;
  top: 40%;
}
#map-select .select-item01 {
  color: rgb(183, 244, 175);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
#map-select .line1 {
  background-color: rgb(183, 244, 175);
  width: 14.4em;
  height: 0.4em;
}
.select-item01-close {
  color: rgb(186, 198, 200);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
.line1-close {
  background-color: rgb(186, 198, 200);
  width: 14.4em;
  height: 0.4em;
}
#select-item02 {
  position: relative;
  left: 15%;
}
#map-select .select-item02-close {
  color: rgb(186, 198, 200);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
.select-item02 {
  color: rgb(183, 244, 175);
  font-size: 2.4em;
  font-weight: bold;
  cursor: pointer;
}
#map-select .line2-close {
  background-color: rgb(186, 198, 200);
  position: relative;
  width: 14.4em;
  height: 0.4em;
}
.line2 {
  background-color: rgb(183, 244, 175);
  width: 14.4em;
  height: 0.4em;
}
/* 搜索框样式 */
#search-box {
  background-color: rgba(18, 33, 43);
  width: 40%;
}
.search-input {
  padding: 0px 0px 0px 1em;
  font-size: 1.3em;
  color: white; /* 设置文本颜色为白色 */
  /* visibility: hidden; */
  position: relative;
  top: 52%;
  right: -67%;
  /* width: 19%; */
  width: 19%;
  height: 60%;
  border-radius: 0.8em;
  border: 0.08em solid gray;
  background-color: transparent; /* 设置背景色为透明 */
  transition: all 0.3s ease; /* 过渡效果 */
}
.searchBtn {
  position: relative;
  top: -10%;
  right: -79%;
  width: 6%;
  height: 50%;
  z-index: 999;
  background-image: url("../assets/images/查找图标.png");
  background-size: 100%;
}
/* 针对input文本框设置焦点时的样式 */
input:focus {
  border-color: white; /* 将边框颜色设置为白色 */
  outline: 0.05em solid white; /* 可选：保留轮廓，但改为白色 */
}
/* 下拉菜单样式 */
#select-box {
  background-color: rgba(18, 33, 43);
  height: 42%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}

#list4 {
  position: relative;
  top: 55%;
  left: 12%;
  width: 20%;
}
.listBtn1 {
  display: inline-block; /* 将span转换为内联块级元素 */
  position: relative;
  width: 78%;
  height: 64%;
  background-color: rgb(130, 140, 142);
  cursor: pointer;
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  transition: all 0s ease; /* 过渡效果 */
}
.listBtn1 p {
  font-weight: bold;
  font-size: 1.8em;
}
.listBtn2 {
  display: inline-block; /* 将span转换为内联块级元素 */
  position: relative;
  width: 13%;
  height: 64%;
  left: 80%;
  top: -64%;
  background-color: rgb(130, 140, 142);
  background-image: url("../assets/images/下拉按钮.png");
  background-position: center center;
  cursor: pointer;
  transition: all 0 ease; /* 过渡效果 */
}
.listLine {
  background-color: rgb(130, 140, 142);
  position: relative;
  width: 78%;
  height: 8%;
  top: -60%;
  left: 0%;
}
/* 下拉内容的初始样式 */
.dropdown-content {
  height: 0%;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: -50%;
  width: 93%;
  border-top: 0.08em solid rgb(18, 33, 43);
  transition: all 0.5s ease; /* 过渡效果 */
  z-index: 9999;
}
.dropdown-content a {
  position: relative;
  top: 1%;
}
#dropdown2 {
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
  width: 187%;
  height: 1000%;
  visibility: hidden;
  position: relative;
  top: -10%;
  z-index: 9999;
}
.dropdown-content2 {
  height: 0%;
  overflow: hidden;
  visibility: hidden;
  position: relative;
  top: -4.5%;
  width: 49.9%;
  border-top: 0.08em solid rgb(18, 33, 43);
  transition: all 0.6s ease; /* 过渡效果 */
}
.dropdown-content2 a {
  position: relative;
  top: 0.1%;
}
.dropdown-content2 a:hover {
  color: white;
}
.dropdown-content2 a:hover .dropdown {
  /* background-color: rgba(186,198,200,0.8); */
  background-color: rgba(239, 242, 242, 0.8);
}
/* 鼠标悬停时下拉内容显示 */
.dropdown:hover .dropdown-content2 {
  height: 100%;
  visibility: visible;
}

/* 下拉项样式 */
.content-a {
  background-color: rgba(130, 140, 142, 0.8);
  font-size: 1.25em;
  color: black;
  font-weight: bold;
  transition: color 0.3s ease; /* 添加过渡效果，颜色变化持续0.3秒 */
  padding: 0.3em 0.4em;
  text-decoration: none;
  display: block;
  cursor: pointer;
  border-bottom: 0.08em solid rgb(18, 33, 43);
  border-left: 0.08em solid rgb(18, 33, 43);
  border-right: 0.08em solid rgb(18, 33, 43);
}
.dropdown-content a:hover {
  color: white;
}
.dropdown-content a:hover .dropdown {
  /* background-color: rgba(186,198,200,0.8); */
  background-color: rgba(239, 242, 242, 0.8);
}
/* 鼠标悬停时下拉内容显示 */
.dropdown:hover .dropdown-content {
  height: 1000%;
  visibility: visible;
}
.dropdown:hover .listBtn1 {
  background-color: rgb(186, 198, 200);
}
.dropdown:hover .listBtn2 {
  background-color: rgb(186, 198, 200);
}
.dropdown:hover .listLine {
  background-color: rgb(186, 198, 200);
}
/* 标题样式 */
#BigHeadline {
  height: 46%;
  display: flex; /* 启用Flexbox布局 */
  justify-content: space-between; /* 子元素之间的间隔均匀分布 */
}
#BigHeadline #Words-cn {
  width: 100%;
}
#Words-cn p {
  display: inline;
  color: rgb(183, 244, 175);
  font-size: 3.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  left: 10%;
  top: 29%;
}
#BigHeadline #Year {
  margin-left: 2%;
  color: rgb(183, 244, 175);
  font-size: 2em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
#Words-English {
  height: 15%;
}
#Words-English p {
  color: rgb(183, 244, 175);
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  left: 10%;
}

.Information-box {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s ease;
  /* background-color: rgb(241, 83, 15); */
}
.Information-hidden {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 1;
  transition: opacity 0.5s ease;
  /* background-color: rgb(241, 83, 15); */
}
#blockName {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.8);
  border-radius: 5px;
  font-size: 0.8em;
  color: aliceblue;
  font-weight: bolder;
  position: relative;
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略符号 */
  flex-basis: 20%;
  margin-bottom: 2%;
}
#blockName p {
  margin: 1%;
}
#Information {
  display: flex;
  padding: 5px;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.5);
  border-radius: 5px;
  font-size: 0.75em;
  color: aliceblue;
  position: relative;
  text-overflow: ellipsis; /* 显示省略符号 */
  flex-basis: 80%;
}
#Information p {
  margin: 1%;
}
</style>
<template>
  <body>
    <!-- 头部导航栏 -->
    <div id="header">
      <div id="title">
        <div id="BigHeadline">
          <div id="Words-cn">
            <p>南沙区产业地图</p>
            <p id="Year">(2024)</p>
          </div>
        </div>
      </div>

      <div id="content-top">
        <div id="top1">
          <div id="map-select" @click="selectMap1()">
            <div>
              <div class="select-item01-close">行业门类地图</div>
              <div class="line1-close"></div>
              #
            </div>

            <div id="select-item02">
              <div class="select-item02">产业园区地图</div>
              <div class="line2"></div>
            </div>
          </div>

          <div id="list4" class="dropdown list">
            <span class="listBtn1"><p>产业园区</p></span>
            <span class="listBtn2"></span>
            <div class="listLine"></div>
            <div id="dropdown2">
              <div class="dropdown-content2">
                <a
                  @click="selectBlock(index)"
                  v-for="(item, index) in data2"
                  class="content-a"
                  :key="index"
                  >{{ item["区块名"] }}</a
                >
              </div>
              <div class="dropdown-content2">
                <a
                  @click="selectBlock(index + 11)"
                  v-for="(item, index) in data3"
                  class="content-a"
                  :key="index"
                  >{{ item["区块名"] }}</a
                >
              </div>
            </div>
          </div>

          <div id="search-box">
            <input
              type="text"
              class="search-input"
              v-model="inputName"
              :style="searchBtnSty"
              @keyup.enter="findBlock()"
              placeholder="&emsp;请输入园区名称"
            />
            <div @click="toggleSearch()" id="searchBtn" class="searchBtn"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="content">
      <!-- 产业园区地图 -->
      <div id="map2">
        <mainMap2 />
      </div>
    </div>
  </body>
</template>

<script>
/*eslint-disable*/

import { getCurrentInstance, onMounted } from "vue";
import JSdata1 from "../json/区块信息.json";
import JSdata2 from "../json/区块信息1.json";
import JSdata3 from "../json/区块信息2.json";
import mainMap2 from "./mainMap2.vue";
import pubsub from "pubsub-js";

import { useRoute } from "vue-router";
import { useRouter } from "vue-router";

export default {
  data() {
    return {
      data1: JSdata1,
      data2: JSdata2,
      data3: JSdata3,
      searchBtnSty: {
        visibility: "hidden",
        width: "0%",
        left: "80%",
        position: "relative",
      },

      inputName: "",
      blockID: 0,
    };
  },
  methods: {
    //展开与关闭搜索框
    toggleSearch() {
      if (this.searchBtnSty.visibility === "visible") {
        this.searchBtnSty.visibility = "hidden";
        this.searchBtnSty.width = "0%";
        this.searchBtnSty.left = "80%";
      } else {
        this.searchBtnSty.visibility = "visible";
        this.searchBtnSty.width = "50%";
        this.searchBtnSty.left = "35%";
      }
    },

    // 页面跳转回 page1
    selectMap1() {
      // pubsub通知
      pubsub.publish("routerChange");

      // 路由变化
      router.push({
        path: "/",
        query: {},
      });
    },

    // 页面跳转 page3 传递 blockID 未完成
    selectBlock(index) {
      router.push({
        path: "/page3",
        query: { blockID: index },
      });
      this.blockID = index;
    },

    // 切换到区块页page3 并传递blockID 未完成
    findBlock() {
      console.log(this.inputName);
      let substring = this.inputName;
      this.inputName = "";
      for (let i = 0; i < this.data1.length; i++) {
        let str = this.data1[i].区块名;
        console.log(str);
        if (new RegExp(substring).test(str)) {
          console.log(`"${str}" 包含子字符串 "${substring}"`);
          proxy.blockID = i;
          router.push({
            path: "/page3",
            query: { blockID: proxy.blockID },
          });
          break;
        }
      }
    },
  },
  components: {
    mainMap2,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const route = useRoute();
    const router = useRouter();

    // 页面跳转回 page1
    function selectMap1() {
      router.push({
        path: "/",
        query: {},
      });
    }

    // 页面跳转 page3 传递 blockID 未完成
    function selectBlock(index) {
      router.push({
        path: "/page3",
        query: { blockID: index },
      });
      proxy.blockID = index;
    }

    // 切换到区块页page3 并传递blockID 未完成
    function findBlock() {
      console.log(proxy.inputName);
      let substring = proxy.inputName;
      proxy.inputName = "";
      for (let i = 0; i < proxy.data1.length; i++) {
        let str = proxy.data1[i].区块名;
        console.log(str);
        if (new RegExp(substring).test(str)) {
          console.log(`"${str}" 包含子字符串 "${substring}"`);
          proxy.blockID = i;
          router.push({
            path: "/page3",
            query: { blockID: proxy.blockID },
          });
          break;
        }
      }
    }

    return { selectMap1, selectBlock, findBlock };
  },
};
</script>